<html>
    <head>
        <meta charset="utf-8">

            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 1000px;
                 background-color: #ffffff;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }






        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">


            <div id="mynetwork" class="card-body"></div>
        </div>




        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };





              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');



                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"color": "#97c2fc", "id": "Component", "label": "Component", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "BooleanParser", "label": "BooleanParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "IntParser", "label": "IntParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FloatParser", "label": "FloatParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ListParser", "label": "ListParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "JsonParser", "label": "JsonParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "YamlParser", "label": "YamlParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ToolManager", "label": "ToolManager", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Prompt", "label": "Prompt", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ModelClient", "label": "ModelClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Retriever", "label": "Retriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FunctionTool", "label": "FunctionTool", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Tokenizer", "label": "Tokenizer", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Generator", "label": "Generator", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Embedder", "label": "Embedder", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "BatchEmbedder", "label": "BatchEmbedder", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Sequential", "label": "Sequential", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FunComponent", "label": "FunComponent", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ReActAgent", "label": "ReActAgent", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "OutputParser", "label": "OutputParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "TextSplitter", "label": "TextSplitter", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ToEmbeddings", "label": "ToEmbeddings", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "RetrieverOutputToContextStr", "label": "RetrieverOutputToContextStr", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "DefaultLLMJudge", "label": "DefaultLLMJudge", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "LLMAugmenter", "label": "LLMAugmenter", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "CohereAPIClient", "label": "CohereAPIClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "TransformersClient", "label": "TransformersClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "GroqAPIClient", "label": "GroqAPIClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "GoogleGenAIClient", "label": "GoogleGenAIClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "OpenAIClient", "label": "OpenAIClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "AnthropicAPIClient", "label": "AnthropicAPIClient", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "BM25Retriever", "label": "BM25Retriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "PostgresRetriever", "label": "PostgresRetriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "RerankerRetriever", "label": "RerankerRetriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "LLMRetriever", "label": "LLMRetriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FAISSRetriever", "label": "FAISSRetriever", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "YamlOutputParser", "label": "YamlOutputParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "JsonOutputParser", "label": "JsonOutputParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ListOutputParser", "label": "ListOutputParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "BooleanOutputParser", "label": "BooleanOutputParser", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Sampler", "label": "Sampler", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "RandomSampler", "label": "RandomSampler", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ClassSampler", "label": "ClassSampler", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Enum", "label": "Enum", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "DataClassFormatType", "label": "DataClassFormatType", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "ModelType", "label": "ModelType", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "DistanceToOperator", "label": "DistanceToOperator", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "OptionalPackages", "label": "OptionalPackages", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "DataClass", "label": "DataClass", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "EmbedderOutput", "label": "EmbedderOutput", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "GeneratorOutput", "label": "GeneratorOutput", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "RetrieverOutput", "label": "RetrieverOutput", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FunctionDefinition", "label": "FunctionDefinition", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Function", "label": "Function", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FunctionExpression", "label": "FunctionExpression", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "FunctionOutput", "label": "FunctionOutput", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "StepOutput", "label": "StepOutput", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Document", "label": "Document", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "DialogTurn", "label": "DialogTurn", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Instruction", "label": "Instruction", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "GeneratorStatesRecord", "label": "GeneratorStatesRecord", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "GeneratorCallRecord", "label": "GeneratorCallRecord", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Optimizer", "label": "Optimizer", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "BootstrapFewShot", "label": "BootstrapFewShot", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "LLMOptimizer", "label": "LLMOptimizer", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "LocalDB", "label": "LocalDB", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Parameter", "label": "Parameter", "shape": "dot", "size": 10}, {"color": "#97c2fc", "id": "Sample", "label": "Sample", "shape": "dot", "size": 10}]);
                  edges = new vis.DataSet([{"arrows": "to", "from": "Component", "to": "BooleanParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "IntParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "FloatParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "ListParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "JsonParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "YamlParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "ToolManager", "width": 1}, {"arrows": "to", "from": "Component", "to": "Prompt", "width": 1}, {"arrows": "to", "from": "Component", "to": "ModelClient", "width": 1}, {"arrows": "to", "from": "Component", "to": "Retriever", "width": 1}, {"arrows": "to", "from": "Component", "to": "FunctionTool", "width": 1}, {"arrows": "to", "from": "Component", "to": "Tokenizer", "width": 1}, {"arrows": "to", "from": "Component", "to": "Generator", "width": 1}, {"arrows": "to", "from": "Component", "to": "Embedder", "width": 1}, {"arrows": "to", "from": "Component", "to": "BatchEmbedder", "width": 1}, {"arrows": "to", "from": "Component", "to": "Sequential", "width": 1}, {"arrows": "to", "from": "Component", "to": "FunComponent", "width": 1}, {"arrows": "to", "from": "Component", "to": "ReActAgent", "width": 1}, {"arrows": "to", "from": "Component", "to": "OutputParser", "width": 1}, {"arrows": "to", "from": "Component", "to": "TextSplitter", "width": 1}, {"arrows": "to", "from": "Component", "to": "ToEmbeddings", "width": 1}, {"arrows": "to", "from": "Component", "to": "RetrieverOutputToContextStr", "width": 1}, {"arrows": "to", "from": "Component", "to": "DefaultLLMJudge", "width": 1}, {"arrows": "to", "from": "Component", "to": "LLMAugmenter", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "CohereAPIClient", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "TransformersClient", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "GroqAPIClient", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "GoogleGenAIClient", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "OpenAIClient", "width": 1}, {"arrows": "to", "from": "ModelClient", "to": "AnthropicAPIClient", "width": 1}, {"arrows": "to", "from": "Retriever", "to": "BM25Retriever", "width": 1}, {"arrows": "to", "from": "Retriever", "to": "PostgresRetriever", "width": 1}, {"arrows": "to", "from": "Retriever", "to": "RerankerRetriever", "width": 1}, {"arrows": "to", "from": "Retriever", "to": "LLMRetriever", "width": 1}, {"arrows": "to", "from": "Retriever", "to": "FAISSRetriever", "width": 1}, {"arrows": "to", "from": "OutputParser", "to": "YamlOutputParser", "width": 1}, {"arrows": "to", "from": "OutputParser", "to": "JsonOutputParser", "width": 1}, {"arrows": "to", "from": "OutputParser", "to": "ListOutputParser", "width": 1}, {"arrows": "to", "from": "OutputParser", "to": "BooleanOutputParser", "width": 1}, {"arrows": "to", "from": "Sampler", "to": "RandomSampler", "width": 1}, {"arrows": "to", "from": "Sampler", "to": "ClassSampler", "width": 1}, {"arrows": "to", "from": "Enum", "to": "DataClassFormatType", "width": 1}, {"arrows": "to", "from": "Enum", "to": "ModelType", "width": 1}, {"arrows": "to", "from": "Enum", "to": "DistanceToOperator", "width": 1}, {"arrows": "to", "from": "Enum", "to": "OptionalPackages", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "EmbedderOutput", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "GeneratorOutput", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "RetrieverOutput", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "FunctionDefinition", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "Function", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "FunctionExpression", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "FunctionOutput", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "StepOutput", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "Document", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "DialogTurn", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "Instruction", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "GeneratorStatesRecord", "width": 1}, {"arrows": "to", "from": "DataClass", "to": "GeneratorCallRecord", "width": 1}, {"arrows": "to", "from": "Optimizer", "to": "BootstrapFewShot", "width": 1}, {"arrows": "to", "from": "Optimizer", "to": "LLMOptimizer", "width": 1}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};






                  network = new vis.Network(container, data, options);










                  return network;

              }
              drawGraph();
        </script>
    </body>
</html>
